<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="ipt">
    <input type="button" name="" id="btn" value="发布">
    <ul class="list">
        <!-- <li>11</li> -->
    </ul>
    <script>
        /*
            1-给发布按钮添加一个点击事件
                2-点击的时候 获取 输入框的内容
                向ul添加一条留言数据
        */

        // 0-获取我们需要的dom
        var btn = document.querySelector("#btn");
        var ipt = document.querySelector("#ipt");
        var listUl = document.querySelector('.list');

        // 1-给发布按钮添加一个点击事件


        // 一开始 页面运行起来 就获取输入框的值--获取到的是空字符串
        // 必须要点击的时候获取
        btn.onclick = function () {
            if (ipt.value === '') {
                console.log('判断输入输入框为空， 就结束函数的执行');
                return;
            }
            // 2-点击的时候 获取 输入框的内容
            console.log(ipt.value);
            //根据输入框的值 拼接一个li
            var liStr = `<li>` + ipt.value + '</li>';

            // 每次获取ul内容，加上一个自己拼接的新的li
            var str = listUl.innerHTML + liStr;
            console.log(str);
            listUl.innerHTML = str;

            // 发布完 将输入框设置为空字符串
            ipt.value = ''
        }

    </script>

</body>

</html>